<template>
	<view style="height: 100vh;position: relative; background-color: #1f2025;" class="content">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top">
				<cu-custom :isBack="true" :bgColor="'bg-080808'" :backColor="'text-white'">
					<block slot="backText"><view class="text-white ">剧本管理</view></block>
				</cu-custom>
				<view id="head" class="" style="background-color: #080808;color: #fff;font-size: 26rpx;">
					<van-search @search="search" @change="searchChange" shape="round" background="#080808" placeholder="输入剧本名,快速找到哈" />
					<view class="flex justify-between" style="background-color: #080808;color: #b8b8b8;font-size: 26rpx;position: relative;">
						<scroll-view scroll-x class="nav">
							<view
								class="cu-item"
								:class="index == TabCur ? 'text-white cur' : ''"
								v-for="(item, index) in ['剧本总库', '门店剧本']"
								:key="index"
								@click="tabSelect"
								:data-id="index"
							>
								{{ item }}
							</view>
						</scroll-view>
						<view class="text-center" style="width: 140rpx;line-height: 90rpx;" @click="show = !show">
							<text class="cuIcon-flashlightopen"></text>
							筛选
						</view>
						<view
							v-show="show"
							@click="show = false"
							style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.4);position: fixed;top: 0;left: 0;z-index: 999;"
						></view>
						<uni-transition
							mode-class="slide-right"
							:styles="{
								width: '100%',
								height: '700rpx',
								'background-color': '#fff',
								position: 'absolute',
								top: '90rpx',
								left: 0,
								'z-index': '1000',
								overflow: 'hidden'
							}"
							:show="show"
						>
							<scroll-view scroll-y="true" style="height: 620rpx;">
								<view>
									<view class="padding" v-for="(bigClass, index) in classList" :key="index">
										<view class="text-black">{{ bigClass.big_name }}</view>
										<view class="flex flex-wrap margin-top">
											<view
												class="item cu-tag radius margin-top-xs margin-left-xs text-black"
												:class="{
													'bg-yellow':
														array[0].SmallClassId == smallClass.id ||
														array[1].SmallClassId == smallClass.id ||
														array[2].SmallClassId == smallClass.id ||
														array[3].SmallClassId == smallClass.id ||
														array[4].SmallClassId == smallClass.id ||
														array[5].SmallClassId == smallClass.id ||
														array[6].SmallClassId == smallClass.id ||
														array[7].SmallClassId == smallClass.id ||
														array[8].SmallClassId == smallClass.id
												}"
												style="width: 150rpx;overflow: hidden;"
												v-for="(smallClass, index1) in bigClass.smallClasses"
												:key="index1"
												@click="selectTag(index, smallClass.id)"
											>
												{{ smallClass.small_name }}
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
							<view style="height: 80rpx;" class="">
								<button @click="removeArray" class="cu-btn  bg-gray lg" style="width: 50%;border-radius: 0;">重置</button>
								<button @click="submitSx" class="cu-btn  bg-yellow lg" style="width: 50%;border-radius: 0;">确定</button>
							</view>
						</uni-transition>
					</view>
				</view>
			</view>

			<view class="grarg" style="background-color: #1f2025;">
				<view class="cu-card">
					<view
						@click="$goPage('../../pageB/script/info?id=' + item.id + '&allowAppointment=0')"
						class="cu-item shadow padding-sm"
						style="background-color: #292929;position: relative;"
						v-for="(item, index) in dataList"
						:key="index"
					>
						<image v-if="item.status == 1" src="../../static/icon/zd.png" class="zd" mode=""></image>
						<view class="flex justify-start">
							<image :src="$isHttp(item.picture)" style="width: 148rpx;height: 210rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class=" margin-left-sm" style="width: 520rpx;">
								<view class="flex justify-between margin-top-xs">
									<view class="text-bold text-white">{{ item.name }}</view>
									<view class="cu-btn bg-yellow sm round" v-show="TabCur === 1" @click.stop="playCrud(item.id, item.add_status, index, 1)">修改</view>
								</view>
								<view class="margin-top-sm">
									<view
										v-for="(item1, index1) in item.smallClasses"
										:key="index1"
										v-if="index1 < 6"
										class="cu-tag sm round"
										style="background-color: #3f3f3f;color: #b2b1b6;"
									>
										{{ item1.small_name }}
									</view>
								</view>
								<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
									<view class="flex justify-start align-center">
										<text class="cuIcon-friendfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.sex_type }}</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-timefill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.hour }}小时</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-selectionfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.difficulty }}</view>
									</view>
								</view>
								<view class="flex justify-between  margin-top-xs">
									<view class="flex align-end text-yellow">
										<view class="text-sm ">{{ TabCur === 0 ? '推荐价' : '门店价' }}¥</view>
										<view class="text-lg text-bold">{{ item.price }}</view>
										<view class="text-sm ">/位</view>
									</view>
									<view
										@click.stop="playCrud(item.id, item.add_status, index)"
										class="cu-btn sm round "
										:class="{ 'bg-yellow': item.add_status === 0, 'bg-gray': item.add_status === 1 }"
									>
										{{ item.add_status === 0 ? '添加' : TabCur === 0 ? '已添加' : '删除' }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<van-popup :show="priceShow" round @close="hiddenPop">
			<view class="padding">
				<view class="text-center">设置剧本价格</view>
				<input
					type="digit"
					class="text-xxl solid radius margin-tb-sm"
					v-model="price"
					:focus="priceShow ? true : false"
					placeholder="请输入剧本价格"
					placeholder-style="font-size:40rpx"
					@input="checkNum($event)"
					style="height: 60rpx;"
				/>
				<button type="default" class="cu-btn block" @click="playCrud">添加</button>
			</view>
		</van-popup>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			show: false, //筛选弹框控制
			priceShow: false,
			classList: [], //分类列表
			dataList: [], //剧本列表
			searchvalue: '', //搜索关键词
			TabCur: 0, //tab切换
			scrollLeft: 0,

			array: [], //筛选条件对象
			arrayVal: [], //筛选条件id

			price: '',
			playId: '',
			add_status: '',
			index: '',
			isExit:'',
		};
	},
	onLoad() {
		this.getPlayClass();
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			this.$u.adminApi
				.getStoreList({
					page: pageNo,
					number: pageSize,
					name: this.searchvalue,
					array: this.arrayVal,
					storeId: this.vuex_bussinessId,
					select: this.TabCur == 0 ? '' : 1
				})
				.then(res => {
					this.$refs.paging.complete(res.data);
				});
		},
		getPlayClass() {
			this.$u.api.getPlayClass().then(res => {
				this.classList = res.data;
			});
		},
		search(e) {
			this.$refs.paging.reload();
		},
		searchChange(e) {
			this.searchvalue = e.detail;
		},
		selectTag(index, SmallClassId) {
			//1. 首先我们要得到这个对象
			var tina = this.array.filter(s => {
				return s.index == index;
			});
			var tina1 = this.array.filter(s => {
				return s.SmallClassId == SmallClassId;
			});
			//2. 其次得到这个对象在数组中对应的索引
			var key = this.array.indexOf(tina[0]);
			//3. 如果存在则将其删除，key > -1 代表存在
			key > -1 && this.array.splice(key, 1);
			if (tina1[0] == undefined) {
				this.array.push({
					index,
					SmallClassId
				});
			} else {
				//2. 其次得到这个对象在数组中对应的索引
				var key1 = this.array.indexOf(tina1[0]);

				//3. 如果存在则将其删除，key > -1 代表存在
				key1 > -1 && this.array.splice(key1, 1);
			}

			// 冒泡排序（从后向前）
			function sort(arr) {
				for (var j = 0; j < arr.length - 1; j++) {
					//两两比较，如果前一个比后一个大，则交换位置。
					for (var i = 0; i < arr.length - 1 - j; i++) {
						if (arr[i].index > arr[i + 1].index) {
							var temp = arr[i];
							arr[i] = arr[i + 1];
							arr[i + 1] = temp;
						}
					}
				}
			}
			sort(this.array);
			this.arrayVal = [];
			for (var i = 0; i < this.array.length; i++) {
				this.arrayVal.push(this.array[i].SmallClassId);
			}
		},
		removeArray() {
			this.array = [];
			this.arrayVal = [];
		},
		submitSx() {
			this.hiddenPop();
			this.$refs.paging.reload();
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			this.$refs.paging.reload();
		},
		async playCrud(id, add_status, index, isExit) {
			if (add_status != undefined) {
				this.playId = id;
				this.add_status = add_status;
				this.index = index;
				this.isExit=isExit
			}
			if (!this.priceShow && (add_status === 0 || isExit===1)) {
				this.priceShow = true;
				return;
			}
			let res;
			if (this.add_status === 0) {
				res = await this.$u.adminApi.addPlay({
					playId: this.playId,
					storeId: this.vuex_bussinessId,
					price: this.price
				});
				this.priceShow = false;
				if (res.code === 200) {
					this.dataList[this.index].add_status = 1;
				}
			} else {
				if (this.isExit !== 1) {
					res = await this.$u.adminApi.deletestorePlay({
						playId: this.playId,
						storeId: this.vuex_bussinessId
					});
					if (res.code === 200) {
						if (this.TabCur === 1) {
							this.dataList.splice(this.index, 1);
						} else {
							this.dataList[this.index].add_status = 0;
						}
					}
				} else {
					res = await this.$u.adminApi.updateplay({
						playId: this.playId,
						storeId: this.vuex_bussinessId,
						price: this.price
					});
					if (res.code === 200) {
							this.dataList[this.index].price = this.price;
					}
					this.priceShow = false;
				}
			}
			if (res.code === 200) {
				this.$successToast(res.message);
			} else {
				this.$textToast(res.message);
			}
		},
		hiddenPop() {
			this.show = false;
			this.priceShow = false;
		},
		// 实时监听input输入为数字
		checkNum(e) {
			let val = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
			if (!val) {
				this.price = '';
				return;
			}
			var reg = /[^\d.]/g;

			// 只能是数字和小数点，不能是其他输入
			val = val.replace(reg, '');
			// // 保证第一位只能是数字，不能是点
			val = val.replace(/^\./g, '');
			// // 小数只能出现1位
			val = val
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.');
			// // 小数点后面保留2位
			val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
			this.$nextTick(() => {
				this.price = val;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.zd {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 55rpx;
	z-index: 1;
}

// .grarg {
// 	position: absolute;
// 	top: 225rpx;
// 	bottom: 100rpx;
// }

.box_whbrc {
	width: 90rpx;
	height: 60rpx;
	border-radius: 30rpx;
	// background-color: #cfa526;
	margin-right: 20rpx;
	text-align: center;
	line-height: 60rpx;
}

.bgc_cfa526 {
	background-color: #cfa526;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}
</style>
